<template>
  <div class='joinInterests'>
    <!-- tab切换标签 -->
    <div class='tabs_area'>
      <span :class='showAdvantage?"active":"left"' @click='changeTabs(1)'>
        <div>十大优势</div>
        <div v-show="this.showAdvantage" class='line'></div>
      </span>
      <span :class='showInterests?"active":"right"' @click='changeTabs(2)'>
        <div>加盟权益</div>
        <div v-show="this.showInterests" class='line'></div>
      </span>
      <span :class='showProcedure?"active":"center"' @click='changeTabs(3)'>
        <div>加盟流程</div>
        <div v-show="this.showProcedure" class='line'></div>
      </span>
    </div>
    <!-- 十大优势 -->
    <div v-show="this.showAdvantage" class="advantage_area">
      <div class='background'>
        <img :src='advantage' alt="">
        <SwiperCard :dataSource='advantageList' ref="swiperCard" />
      </div>
    </div>
    <!-- 加盟权益 -->
    <div v-show="this.showInterests" class="interests_area">
      <div class='background'>
        <img :src='legalRight' alt="">
      </div>
    </div>
    <!-- 加盟流程 -->
    <div v-show="this.showProcedure" class="interests_area">
      <div class='background'>
        <img :src='process' alt="">
      </div>
    </div>
    <!-- 立即咨询弹窗 -->
    <div class='dialog_area'>
      <van-dialog v-model="show" :showConfirmButton='false' closeOnClickOverlay>
        <div class='title'>提交资料</div>
        <div class='tip'><img :src="Xpng" alt="" @click="close"></div>
        <div class='block'>
          <div class='title'>联系人</div>
          <input class='input' v-model="form.name" type="text" placeholder="请输入联系人姓名">
        </div>
        <div class='block'>
          <div class='title'>联系电话</div>
          <input class='input' v-model="form.phone" maxlength="11" type="tel" placeholder="请输入联系人电话">
        </div>
        <div class='btn' @click='submitRegister'>立即提交</div>
        <div class='text'>资料提交成功后我们会在1-3个工作日联系您，咨询热线400-885685</div>
      </van-dialog>
    </div>
    <!-- 立即咨询 -->
    <div class='btn_area' @click="showDialog">立即咨询</div>
  </div>
</template>

<script>
import Xpng from '@/assets/image/X.png'
import SwiperCard from './component/SwiperCard/index.vue'
import { getRequest } from '../../api/indexGet'
import { postRequest } from '../../api/index'
import url from '../../axios/apiUrl'
export default {
  components: {
    SwiperCard,
  },
  data() {
    return {
      Xpng, //图片
      showAdvantage: true, //十大优势
      showInterests: false, // 加盟权益
      showProcedure: false, //加盟流程
      show: false, //立即咨询弹窗
      form: {}, //提交表单对象
      advantageList: [], //轮播图数据来源
      advantage: '', //加盟优势图片
      legalRight: '', //加盟权益图片
      process: '', //加盟流程图片
    }
  },
  mounted() {
    this.getLegalRight()
  },
  methods: {
    // //加盟专区（优势、权益、流程）
    async getLegalRight() {
      let res = await getRequest(url.legalRight)
      if (res.data.code == '000000') {
        this.advantageList = res.data.content.advantageList
        this.advantage = res.data.content.advantage
        this.legalRight = res.data.content.legalRight
        this.process = res.data.content.process
        this.$nextTick(() => {
          this.$refs['swiperCard'].swiper()
        })
      }
    },
    //提交信息
    async submitRegister() {
      if (!this.form.name) {
        this.$toast('请输入联系人姓名')
      } else if (!this.form.phone) {
        this.$toast('请输入联系人电话')
      } else {
        let res = await getRequest(url.register + '/' + this.form.name + '/' + this.form.phone)
        if (res.data.code == '000000') {

          this.close()
        } else {
          this.$toast(res.data.message)
        }
      }
    },
    //关闭弹窗
    close() {
      this.show = false
      setTimeout(() => {
        this.form = {}
      }, 500)
    },
    //打开弹窗
    showDialog() {
      this.show = true
    },
    //选择tabs 标签
    changeTabs(index) {
      //1十大优势 2加盟权益 3加盟流程
      if (index == 1) {
        this.showAdvantage = true
        this.showInterests = false
        this.showProcedure = false
      } else if (index == 2) {
        this.showAdvantage = false
        this.showInterests = true
        this.showProcedure = false
      } else if (index == 3) {
        this.showAdvantage = false
        this.showInterests = false
        this.showProcedure = true
      }
    },
  },
}
</script>
<style lang="less" scoped src='./index.less'></style>